<template>
  <basic-dialog
    :width="'40%'"
    :visible.sync="visible"
    :title="'合同是否达标'"
    :handle-close="handleCloseDialog"
    :handle-ok="handleConfirm"
    :loadingBtn="confirmLoading"
    :okText="'提交'"
  >
    <el-form
      ref="formData"
      :model="formData"
      :rules="formValidate"
    >
      <el-form-item label="合同是否达标" prop="contractStandard">
        <el-select
          v-model="formData.contractStandard"
          placeholder="请选择合同是否达标"
          @change="handleChangeStandardType"
        >
          <el-option
            v-for="option in METAL_SELECT_LIST"
            :key="option.value"
            :value="option.value"
            :label="option.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="不达标原因"
        prop="standardReason"
        :rules="[{
          required: formData.contractStandard == 2,
          message: '请输入不达标原因',
          trigger: 'change'
        }]"
      >
        <el-input
          :disabled="formData.contractStandard == 1"
          type="textarea"
          v-model.trim="formData.standardReason"
          placeholder="请输入不达标原因"
          show-word-limit
          maxlength="1000"
          rows="4"
        />
      </el-form-item>
    </el-form>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import { updateContractInfoService } from '@api/supplier/contract';
import {
  METAL_SELECT_LIST,
} from '@supplier/constants/common'
export default {
  components: {
    BasicDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    selectId: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      METAL_SELECT_LIST,
      confirmLoading: false,
      formData: {
        contractStandard: '',
        standardReason: '',
      },
      formValidate: {
        contractStandard: [
          { required: true, message: '请选择合同是否达标', trigger: 'change' }
        ],
      },
    };
  },
  methods: {
    handleChangeStandardType () {
      this.formData.standardReason = ''
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$refs.formData.resetFields();
      this.$emit('update:visible', false);
    },
    handleConfirm () {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          const param = {
            todoIds: this.selectId.join(','),
            ...this.formData
          };
          this.updateNoQuestionRemark(param)
        }
      });
    },
    async updateNoQuestionRemark (param) {
      const res = await updateContractInfoService(
        param,
        state => { this.confirmLoading = state }
      );
      if (res) {
        this.$message.success('操作成功')
        this.$emit('getTableData');
        this.handleCloseDialog();
      }
    },
  }
};
</script>
<style scoped>
.el-select, .el-date-editor.el-input {
  width: 100%;
}
</style>
